<div class="block-image">
  <div class="page-width">
  <div class="block-image_title">
    <h2 class="title left">
      {{ section.settings.title | escape }}
    </h2>
    {%- if section.settings.text != blank -%}
    <div class="rte">{{ section.settings.text }}</div>
    {%- endif -%}
  </div>
  <div class="swiper-father">
    <div class="swiper block-slide">
      <ul class="swiper-wrapper">
        {%- liquid
                assign highest_ratio = 0
                for block in section.blocks
                  if block.settings.image.aspect_ratio > highest_ratio
                    assign highest_ratio = block.settings.image.aspect_ratio
                  endif
                endfor
              -%}
        {%- for block in section.blocks -%}
          <li class="swiper-slide" data-swiper-parallax="-600">
            <div class="multicolumn-card">
              {%- if block.settings.image != blank -%}
              {% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %}
                {% assign spaced_image = true %}
              {% endif %}
              <div class="multicolumn-card__image-wrapper multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing{% endif %}">
                <div class="media media--transparent media--{{ section.settings.image_ratio }}"
                  {% if section.settings.image_ratio == 'adapt' %}
                    style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 100 }}%;"
                  {% endif %}>
                  <img
                    srcset="
                      {%- if block.settings.image.width >= 223 -%}{{ block.settings.image | img_url: '223x' }} 223w,{%- endif -%}
                      {%- if block.settings.image.width >= 248 -%}{{ block.settings.image | img_url: '248x' }} 248w,{%- endif -%}
                      {%- if block.settings.image.width >= 367 -%}{{ block.settings.image | img_url: '367x' }} 367w,{%- endif -%}
                      {%- if block.settings.image.width >= 375 -%}{{ block.settings.image | img_url: '375x' }} 375w,{%- endif -%}
                      {%- if block.settings.image.width >= 550 -%}{{ block.settings.image | img_url: '550x' }} 550w,{%- endif -%}
                      {%- if block.settings.image.width >= 710 -%}{{ block.settings.image | img_url: '710x' }} 710w,{%- endif -%}
                      {%- if block.settings.image.width >= 1420 -%}{{ block.settings.image | img_url: '1420x' }} 1420w,{%- endif -%}"
                    src="{{ block.settings.image | img_url: '550x' }}"
                    sizes="(min-width: 990px) {% if section.blocks.size <= 2 %}710px{% else %}550px{% endif %},
                      (min-width: 750px) {% if section.blocks.size == 1 %}710px{% else %}550px{% endif %},
                      calc(100vw - 30px)"
                    alt="{{ block.settings.image.alt }}"
                    height="{{ block.settings.image.height }}"
                    width="{{ block.settings.image.width }}"
                    loading="lazy"
                  >
                </div>
              </div>
            {%- endif -%}
            <div class="multicolumn-card__info">
                      {%- if block.settings.title != blank -%}

                      <h3>{{ block.settings.title | escape }}</h3>

                      {%- endif -%}
                      {%- if block.settings.text != blank -%}
                        <div class="rte">{{ block.settings.text }}</div>
                      {%- endif -%}
                    </div>
            </div>
          </li>
        {%- endfor -%}
        </li>
      </ul>
      <div class="swiper-pagination silde-line"></div>
      <div class="swiper-button-next silde-line">{% render 'swiper-next' %}</div>
      <div class="swiper-button-prev silde-line">{% render 'swiper-prev' %}</div>
    </div>
  </div>

</div>
</div>





<script>
    var swiper = new Swiper('.block-slide', {
      speed: 600,
      slidesPerView: 2.5,
      spaceBetween: 30,
      simulateTouch : false,
      observer:true,
      observeParents:true,
      pagination: {
        el: '.swiper-pagination.silde-line',
      },
      navigation: {
      nextEl: ".swiper-button-next.silde-line",
      prevEl: ".swiper-button-prev.silde-line",
    },
      breakpoints: {
        320: {
          slidesPerView:1,
          spaceBetween: 16,
        },
        375: {
          slidesPerView: 1.02,
          spaceBetween: 16,
        },
        640: {
          slidesPerView:1.1,
          spaceBetween: 16,
        },
        750: {
          slidesPerView: 2,
          spaceBetween:30,
        },
        768: {
          slidesPerView: 2,
          spaceBetween:30,
        },
         990: {
          slidesPerView: 2.5,
          spaceBetween:30,
        },
        991: {
          slidesPerView: 2.5,
          spaceBetween:30,
        },
        1440: {
          slidesPerView: 2.5,
          spaceBetween:30,
        },
      }
    });
</script>


  


{% schema %}
{
  "name": "Multicolumn block slide",
  "class": "multicolumn-block-slide spaced-section spaced-section--full-width",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "default": "Multicolumn",
      "label": "t:sections.multicolumn.settings.title.label"
    },
    {
        "type": "text",
        "id": "text",
        "default": "text",
        "label": "text"
      },
    {
      "type": "select",
      "id": "image_width",
      "options": [
        {
          "value": "third",
          "label": "t:sections.multicolumn.settings.image_width.options__1.label"
        },
        {
          "value": "half",
          "label": "t:sections.multicolumn.settings.image_width.options__2.label"
        },
        {
          "value": "full",
          "label": "t:sections.multicolumn.settings.image_width.options__3.label"
        }
      ],
      "default": "full",
      "label": "t:sections.multicolumn.settings.image_width.label"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.multicolumn.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.multicolumn.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.multicolumn.settings.image_ratio.options__3.label"
        },
        {
          "value": "circle",
          "label": "t:sections.multicolumn.settings.image_ratio.options__4.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.multicolumn.settings.image_ratio.label"
    },
    {
      "type": "select",
      "id": "column_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.multicolumn.settings.column_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.multicolumn.settings.column_alignment.options__2.label"
        }
      ],
      "default": "left",
      "label": "t:sections.multicolumn.settings.column_alignment.label"
    },
    {
      "type": "select",
      "id": "background_style",
      "options": [
        {
          "value": "none",
          "label": "t:sections.multicolumn.settings.background_style.options__1.label"
        },
        {
          "value": "primary",
          "label": "t:sections.multicolumn.settings.background_style.options__2.label"
        },
        {
          "value": "secondary",
          "label": "t:sections.multicolumn.settings.background_style.options__3.label"
        }
      ],
      "default": "primary",
      "label": "t:sections.multicolumn.settings.background_style.label"
    },
    {
      "type": "text",
      "id": "button_label",
      "default": "Button label",
      "label": "t:sections.multicolumn.settings.button_label.label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "t:sections.multicolumn.settings.button_link.label"
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": false,
      "label": "t:sections.multicolumn.settings.swipe_on_mobile.label"
    }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "t:sections.multicolumn.blocks.column.name",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.multicolumn.blocks.column.settings.image.label"
        },
        {
          "type": "text",
          "id": "title",
          "default": "Column",
          "label": "t:sections.multicolumn.blocks.column.settings.title.label"
        },
        {
          "type": "text",
          "id": "title_us",
          "label": "Heading US"
        },
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
          "label": "t:sections.multicolumn.blocks.column.settings.text.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Multicolumn block slide",
      "blocks": [
        {
          "type": "column"
        },
        {
          "type": "column"
        },
        {
          "type": "column"
        }
      ]
    }
  ]
}
{% endschema %}








